<template>
  <div>
    <template>
      <!-- 添加 修改 新角色 -->
      <div class="btn" style="line-height: 40px">
        <el-button type="primary" round @click="dialogFormVisible = true"
          >添加新的角色</el-button
        >
        <!-- 根据id搜索 -->
        <el-input
          v-model.number="id_sou"
          autocomplete="off"
          style="width: 300px; margin: 5px 50px"
          placeholder="输入角色id查询"
        ></el-input>
        <el-button type="warning" round @click="idc">根据id搜索角色</el-button>
      </div>
      <el-dialog
        title="查询结果"
        :visible.sync="sou_result"
        style="line-height: 40px"
      >
        <el-form :model="souData">
          角色id:<span v-text="souData.roleId"></span> <br />角色名称:<span
            v-text="souData.roleName"
          ></span
          ><br />
          角色描述:<span v-text="souData.roleDesc"></span>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sou_result = false">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 添加新角色的弹窗 -->
      <el-dialog
        title="添加新的角色"
        :visible.sync="dialogFormVisible"
        style="line-height: 40px"
      >
        <el-form :model="form">
          <el-form-item label="角色名称">
            <el-input v-model="form.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述(可以为空)">
            <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addrloe">确 定</el-button>
        </div>
      </el-dialog></template
    >
    <!-- 修改角色信息 -->
    <el-dialog title="修改用户信息" :visible.sync="xiugaiForm">
      <el-form :model="updataform">
        <el-form-item label="角色名称">
          <el-input v-model="updataform.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="updataform.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xiugaiForm = false">取 消</el-button>
        <el-button type="primary" @click="quedingxiugai">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 授权 -->
    <el-dialog
      title="添加新的分类"
      :visible.sync="shouquanVisible"
      style="line-height: 40px"
    >
      <el-form :model="shouquanfom">
        <el-form-item label="角色id">
          <el-input v-model="shouquanfom.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input
            v-model="shouquanfom.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-cascader
            :collapse-tags="true"
            :clearable="true"
            v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shouquanVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedengrole">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 内容渲染 -->
    <div id="box">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%; line-height: 50px"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="id" label="角色id" width="180">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="180">
          </el-table-column>
          <el-table-column prop="roleDesc" label="角色描述" width="400px">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                type="info"
                circle
                @click="search(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                title="删除商品"
                @click="del(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                title="角色授权"
                @click="shouquan(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 权限描述 -->
      <template id="right">
        <el-tabs :tab-position="tabPosition" style="height: 300px">
          <el-tab-pane
            :label="value.id + value.roleName"
            v-for="(value, key) in tableData"
            :key="key"
          >
            <el-tabs :tab-position="tabPosition" style="height: 500px">
              <el-tab-pane
                :label="val.id + val.authName"
                v-for="(val, k) in value.children"
                :key="k"
              >
                <el-tabs :tab-position="tabPosition" style="height: 500px">
                  <el-tab-pane
                    :label="va.id + va.authName"
                    v-for="(va, k) in val.children"
                    :key="k"
                  >
                    <p
                      v-text="v.id + v.authName"
                      v-for="(v, x) in va.children"
                      :key="x"
                      style="text-align: start; line-height: 40px"
                    ></p>
                  </el-tab-pane> </el-tabs></el-tab-pane></el-tabs
          ></el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
  <!-- <p
    v-text="v.id + v.authName"
    v-for="(v, x) in val.children"
    :key="x"
    style="
      text-align: start;      id="box"

      line-height: 40px;
    "
  ></p> -->
</template>

<script>
export default {
  name: "VueRoles",

  data() {
    return {
      tableData: [],
      tabPosition: "left",
      dialogFormVisible: false,
      xiugaiForm: false,
      shouquanVisible: false,
      form: {},
      updataform: {},
      id_sou: "",
      souData: {},
      sou_result: false,
      //权限列表获取
      options: [],
      value: [],
      props: {
        expandTrigger: "hover",
        value: "id",
        label: "authName",
        // multiple: true,
      },
      shouquanfom: {},
    };
  },

  async mounted() {
    if (localStorage.getItem("userinfo")) {
      //侧边栏
      var { data } = await this.$axios.get("/roles");
      console.log(data.data);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.tableData = data.data;
      } else {
        this.$message.error(data.meta.message);
      }

      var { data } = await this.$axios.get("/rights/tree");
      console.log(data);
      this.options = data.data;
      this.$message({
        message: data.meta.msg,
        type: "success",
      });
    }
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    //确定分配
    async quedengrole() {
      console.log(this.shouquanfom.id);
      console.log(this.value);
      var { data } = await this.$axios.post(
        "/roles/" + this.shouquanfom.id + "/rights",
        {
          rids: `${this.value[0]},${this.value[1]},${this.value[2]}`,
        }
      );
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.shouquanVisible = false;
      }
    },
    //分配权限kuang
    handleChange(value) {
      console.log(value);
      this.value = value;
    },
    shouquan(role) {
      console.log(role);
      this.shouquanVisible = true;
      this.shouquanfom = role;
    },
    //删除角色
    async del(updataform) {
      console.log(updataform);
      var { data } = await this.$axios.delete("/roles/" + updataform.id);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.$router.go(0);
      }
    },

    //具体id查
    async idc() {
      var { data } = await this.$axios.get("/roles/" + this.id_sou);
      console.log(data);
      this.souData = data.data;
      this.sou_result = true;
      this.$message({
        message: data.meta.msg,
        type: "success",
      });
    },

    //修改弹出框信息
    search(updata) {
      console.log(updata);
      this.xiugaiForm = true;
      this.updataform = updata;
    },
    //确定改
    async quedingxiugai() {
      console.log(this.updataform);
      var { data } = await this.$axios.put(
        "/roles/" + this.updataform.id,
        this.updataform
      );

      if (data.meta.status == 200) {
        this.xiugaiForm = false;
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
      } else {
        this.$message.error("修改失败" + data.meta.msg.sqlMessage);
      }
    },
    //添加新角色
    async addrloe() {
      var { data } = await this.$axios.post("/roles", this.form);
      console.log(data);
      this.dialogFormVisible = false;
      if (data.meta.status == 201) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        var { data } = await this.$axios.get("/roles");
        console.log(data.data);
        if (data.meta.status == 200) {
          this.$message({
            message: data.meta.msg,
            type: "success",
          });
          this.tableData = data.data;
        }
      }
    },
  },
};
</script>

<style lang="css">
#box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
#right {
  flex: 40%;
  width: 400px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>